<template>
	<div class="Record">
		<div class="Team-head">
			<div></div>
			<div class="head-title">提现记录</div>
		</div>
		<!-- 提现记录 -->
		<div v-if="this.isAdimn == 'true'" class="Record-head">
				提现时间  
				<el-date-picker
					style="width: 180px;margin-right:30px"
					v-model="quertInfo.withdrawDate"
					type="date"
					format="yyyy年MM月dd日"
					value-format="yyyy-MM-dd"
					placeholder="请选择日期">
				</el-date-picker>
				提现账号  
				<el-input
					style="width: 180px;margin-right:30px"
					placeholder="请输入账号"
					suffix-icon="el-icon-search"
					v-model="quertInfo.withdrawPhone">
				</el-input>
				姓名  
				<el-input
					style="width: 180px;margin-right:30px"
					placeholder="请输入姓名"
					suffix-icon="el-icon-search"
					v-model="quertInfo.name">
				</el-input>
				订单状态   
				<el-select 
					style="width: 180px;margin-right:30px"
					v-model="quertInfo.orderStatus" 
					placeholder="请选择">
					<el-option value="全部">全部</el-option>
					<el-option value="已结算">已结算</el-option>
					<el-option value="未结算">未结算</el-option>
				</el-select>
				<el-button style="width:80px" type="primary" @click="search">查询</el-button>
		</div>
		<el-table :data="tableData" border style="width: 100%">
		    <el-table-column prop="id" label="订单号" width="100">
		    </el-table-column>
		    <el-table-column prop="pri" label="提现金额" width="100">
		    </el-table-column>
		    <el-table-column prop="name" label="姓名" width="100">
		    </el-table-column>
		    <el-table-column prop="withdrawId" label="提现账号" width="150">
		    </el-table-column>
		    <el-table-column prop="withdrawPrev" label="提现前余额" width="120">
		    </el-table-column>
		    <el-table-column prop="withdrawAfter" label="提现现余额" width="120">
		    </el-table-column>
		    <el-table-column prop="time" label="提现时间" width="200">
		    </el-table-column>
			<el-table-column label="订单状态">
				<template slot-scope="scope">
					<span v-if="scope.row.orderStatus">已结算</span>
					<span v-else>未结算</span>
				</template>
		    </el-table-column>
			<el-table-column v-if="isAdimn == 'true'" label="操作">
				<template slot-scope="scope">
					<el-button size="small" disabled v-if="scope.row.orderStatus" type="primary">已结算</el-button>
					<el-button size="small" v-else type="primary" @click="tojiesuan(scope.row.id)">结算</el-button>
				</template>
		    </el-table-column>
		</el-table>
		<div class="pagination">
		    <el-pagination
		        @current-change="handleCurrentChange"
		        style="float:right"
		        background
		        :current-page="quertInfo.pagenum"
		        :page-size="quertInfo.pagesize"
		        layout="prev, pager, next, total"
		        :total="total">
		    </el-pagination> 
		</div>
	</div>
</template>

<script>
	export default{
		name:'Record',
		data(){		
			return{
				tableData: [],
				quertInfo:{
					pagenum:1,
					pagesize:10,
					withdrawDate:'',
					withdrawPhone:'',
					name:'',
					orderStatus:'全部'
				},
				total:0,
				isAdimn:'',
				path:''
			}
		},
		methods:{
			getList(){
				if(this.path == 'withdrawalRecord'){
					this.quertInfo={
						pagenum:this.quertInfo.pagenum,
						pagesize:this.quertInfo.pagesize
					}
				}
				this.$http.post(this.path,this.quertInfo).then((data)=>{
					if(data.data.success){
						var num = data.data.msg.length;
						if ( num>1 ) this.$message({
							showClose: true,
							message: data.data.msg,
							type: 'success',
							offset:'65',
							duration:1000
						});
						this.total = data.data.data.total;
						this.tableData = data.data.data.tableData;
					}else{
						this.$message.error(data.data.msg)
					}
				})
			},
			handleCurrentChange(newPage){
				this.quertInfo.pagenum = newPage;
				this.getList()
			},
			tojiesuan(id){
				this.$http.post('settlementOrder',{id}).then((data)=>{
					if(data.data.success){
						var num = data.data.msg.length;
						if ( num>1 ) this.$message({
							showClose: true,
							message: data.data.msg,
							type: 'success',
							offset:'65',
							duration:1000
						});
						this.getList()
					}else{
						this.$message.error(data.data.msg)
					}
				})
			},
			search(){
				this.getList()
			}
		},
		created () {
			this.isAdimn = window.atob(this.$cookie.get('isAdimn'));
			if(this.isAdimn == 'true'){
				this.path = 'adminWithdrawalRecord'
			}else if(this.isAdimn == 'false'){
				this.path = 'withdrawalRecord'
			}
			this.getList()
		}
	}
</script>

<style scoped>
	.Team-head{
		height: 30px;
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}
	.Team-head>div:nth-child(1){
		width: 4px;
		height: 20px;
		background-color: #2ad199;
		margin-right: 10px;
	}

	.Record-head{
		padding-bottom: 20px;
		margin-bottom: 20px;
		border-bottom: 1px solid #e8e8e8;
	}

	.el-input__inner{
		display: inline-block;
	}

	.pagination{
	    padding: 10px 30px 30px;
	    overflow: hidden;
	}
</style>
